<template>
  <div class="service-stats page-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>数据决策看板</h1>
      <p>实时监控业务数据，助力科学决策</p>
      <div class="header-actions">
        <el-button type="primary" @click="refreshAllData">
          <el-icon>
            <Refresh />
          </el-icon>
          刷新全部数据
        </el-button>
        <el-button type="success" @click="exportData">
          <el-icon>
            <Download />
          </el-icon>
          导出报表
        </el-button>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card>
          <div class="metric-value">{{ overviewData.totalRevenue }}</div>
          <div class="metric-label">今日总营收 (元)</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="metric-value">{{ overviewData.totalAppointments }}</div>
          <div class="metric-label">今日预约数</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="metric-value">{{ overviewData.completionRate }}%</div>
          <div class="metric-label">完成率</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="metric-value">{{ overviewData.customerSatisfaction }}</div>
          <div class="metric-label">客户满意度</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要图表区域 -->
    <el-tabs v-model="activeTab" type="card" class="stats-tabs">
      <el-tab-pane label="经营分析" name="business">
        <BusinessAnalysis />
      </el-tab-pane>
      <el-tab-pane label="客户洞察" name="customer">
        <CustomerInsight />
      </el-tab-pane>
      <el-tab-pane label="预警监控" name="warning">
        <WarningMonitor />
      </el-tab-pane>
      <el-tab-pane label="门店终端" name="terminal">
        <StoreTerminal />
      </el-tab-pane>
    </el-tabs>

    <!-- 实时监控面板 -->
    <el-card class="realtime-monitor">
      <template #header>
        <div class="card-header">
          <span>实时监控</span>
          <el-tag :type="systemStatus.type">{{ systemStatus.text }}</el-tag>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="monitor-item">
            <div class="monitor-label">在线技师</div>
            <div class="monitor-value">{{ realtimeData.onlineTechnicians }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="monitor-item">
            <div class="monitor-label">进行中服务</div>
            <div class="monitor-value">{{ realtimeData.activeServices }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="monitor-item">
            <div class="monitor-label">等待队列</div>
            <div class="monitor-value">{{ realtimeData.waitingQueue }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="monitor-item">
            <div class="monitor-label">系统负载</div>
            <div class="monitor-value">{{ realtimeData.systemLoad }}%</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Download } from '@element-plus/icons-vue'
import BusinessAnalysis from './components/BusinessAnalysis.vue'
import CustomerInsight from './components/CustomerInsight.vue'
import WarningMonitor from './components/WarningMonitor.vue'
import StoreTerminal from './components/StoreTerminal.vue'
import './styles/global.css'

// 响应式数据
const activeTab = ref('business')
const refreshTimer = ref(null)

// 概览数据
const overviewData = ref({
  totalRevenue: '28,650',
  totalAppointments: 156,
  completionRate: 92.5,
  customerSatisfaction: '4.8'
})

// 实时数据
const realtimeData = ref({
  onlineTechnicians: 12,
  activeServices: 8,
  waitingQueue: 3,
  systemLoad: 68
})

// 系统状态
const systemStatus = ref({
  type: 'success',
  text: '系统正常'
})

// 刷新所有数据
const refreshAllData = async () => {
  try {
    ElMessage.success('正在刷新数据...')

    // 模拟数据刷新
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 更新概览数据
    overviewData.value = {
      totalRevenue: (Math.random() * 50000 + 20000).toFixed(0),
      totalAppointments: Math.floor(Math.random() * 100 + 100),
      completionRate: (Math.random() * 10 + 90).toFixed(1),
      customerSatisfaction: (Math.random() * 0.5 + 4.5).toFixed(1)
    }

    // 更新实时数据
    realtimeData.value = {
      onlineTechnicians: Math.floor(Math.random() * 5 + 10),
      activeServices: Math.floor(Math.random() * 10 + 5),
      waitingQueue: Math.floor(Math.random() * 5),
      systemLoad: Math.floor(Math.random() * 30 + 50)
    }

    ElMessage.success('数据刷新完成')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

// 导出数据
const exportData = () => {
  ElMessage.info('导出功能开发中...')
}

// 自动刷新
const startAutoRefresh = () => {
  refreshTimer.value = setInterval(() => {
    // 更新实时数据
    realtimeData.value = {
      onlineTechnicians: Math.floor(Math.random() * 5 + 10),
      activeServices: Math.floor(Math.random() * 10 + 5),
      waitingQueue: Math.floor(Math.random() * 5),
      systemLoad: Math.floor(Math.random() * 30 + 50)
    }

    // 更新系统状态
    const load = realtimeData.value.systemLoad
    if (load > 80) {
      systemStatus.value = { type: 'danger', text: '系统繁忙' }
    } else if (load > 60) {
      systemStatus.value = { type: 'warning', text: '系统正常' }
    } else {
      systemStatus.value = { type: 'success', text: '系统空闲' }
    }
  }, 30000) // 30秒刷新一次
}

const stopAutoRefresh = () => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
    refreshTimer.value = null
  }
}

// 生命周期
onMounted(() => {
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-tabs {
  margin-bottom: 20px;
}

.stats-tabs .el-tabs__content {
  background: white;
  border-radius: 8px;
  padding: 0;
}

.monitor-item {
  text-align: center;
  padding: 16px;
}

.monitor-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.monitor-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
</style>